<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>首页 | 陈一非的博客</title>
    <link rel="stylesheet" href="css/main.css">
    <link href="css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <div id="nav-placeholder"></div>

    <section class="hero-section">
        <div class="hero-text">
            <h2 style="color: #ffffff;">cyf的小窝</h2>
            <p>一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
        </div>
        <button id="scroll-down" class="scroll-down-arrow">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5V19M12 19L19 12M12 19L5 12" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </button>
    </section>


    <main class="container">
        <div class="content-container" style="display: flex; gap: 20px; padding: 20px;">
            <div id="sidebar-placeholder"></div>
            <div class="main-content"
                style="background-color: rgba(255, 255, 255, 0.8); border-radius: 12px; padding: 25px;">
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"
                    style="max-width: 1100px; margin: 0 auto 30px; border-radius: 12px; overflow: hidden; height: 450px;">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
                            class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="images/banner2.png" class="d-block w-100" alt="编程学习"
                                style="height: 100%; object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block"
                                style="background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px;">
                                <h5>算法竞赛学习</h5>
                                <p>分享算法竞赛解题思路与技巧</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="images/banner1.png" class="d-block w-100" alt="Web开发"
                                style="height: 100%; object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block"
                                style="background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px;">
                                <h5>Web前端技术</h5>
                                <p>探索现代前端开发框架与实践</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="images/banner3.png" class="d-block w-100" alt="学习笔记"
                                style="height: 100%; object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block"
                                style="background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px;">
                                <h5>学习心得分享</h5>
                                <p>记录编程学习路上的点滴收获</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
            <div id="right-sidebar-placeholder"></div>
        </div>
    </main>

    <div id="footer-placeholder"></div>

    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
</body>

</html>